
import React,{useState,useEffect} from 'react'
import axios from './axios'

export default function MyToBeReceived() {
  const [cartls, setCartls] = useState([])

    //用户id
  const [userid, setUserId] = useState('6693b3e1b44ec7f24ef6cf30')

   //请求订单数据
   const getall=async()=>{
    let {data} = await axios.get(`get_allcart?id=${userid}`)
    let ls = []
    data.data.map((item,index)=>{
      if (item.flag == 3){
        ls.push(item)
      }
    })
    console.log('待收货',ls);
    setCartls(ls)
    console.log(data.data);
  }
  useEffect(()=>{
      getall()
  },[])

  return (
    <div>
      {/* {cartls.map((item,index)=>{
        return <div key={index}>
          {item.name}
          
          </div>
      })} */}
      {cartls.map((item,index)=>{
              return <div key={item._id} className='my_all_order_center_xuanran'>
                <div className='my_all_order_center_xuanran_left'>
                  <img src={`/img/${item.imgsrc}`} alt="" style={{ width: '100px',height:'100px' }} />

                </div>
                <div className='my_all_order_center_xuanran_right'>
                  <h3>{item.name}</h3>
                  <div className='my_all_xuanran_p'>
                  <p className='my_all_xuanran_p1'>共一件</p>
                  <p>￥{item.price}</p>
                  
                  </div>
                  <p className='my_all_xuanran_caozuo_zhifu' 
                  style={{display:item.flag==1?'':'none',color:'red'}}>待付款</p>
                  <p className='my_all_xuanran_caozuo_zhifu' 
                  style={{display:item.flag==2?'':'none',color:'red'}}>·待发货·</p>
                  <p className='my_all_xuanran_caozuo_zhifu' 
                  style={{display:item.flag==3?'':'none',color:'red'}}>·请确认收货·</p>
                  <p className='my_all_xuanran_caozuo_zhifu' 
                  style={{display:item.flag==4?'':'none',color:'#919191'}}>已完成</p>
                  
                  {/* <p>{item.flag}</p> */}
                  <div className='caozuo'>
                  <button style={{display:item.flag==1?'':'none'}}>取消订单</button>

                  <button style={{display:item.flag==1?'':'none',color:'white',backgroundColor:'red',border:'none'}}>去支付</button>
                  
                  <button style={{display:item.flag==2?'':'none'}}>等待发货</button>
                  <button style={{display:item.flag==3?'':'none'}}>确认收货</button>
                  <button style={{display:item.flag==4?'':'none'}}>删除订单</button>
                  <p></p>
                </div>
                </div>
                
              </div>
            })}

    </div>
  )
}
